<template>
    <div>
        <div class="header">
            <mt-header title="入住人列表">
                <router-link to="/myindex" slot="left">
                    <mt-button icon="back"></mt-button>
                </router-link>
            </mt-header>
        </div>

        <div class="body">
            <div class="people" v-for="(item, index) in data" :key="index">
                <div class="id">
                    入住人ID为： {{ item.id }}
                </div>
                <div class="name">
                    入住人姓名： {{ item.name }}
                </div>
                <!-- <div class="idCard">
                    入住人身份证：{{ item.cardNo }}
                </div> -->
                <div class="phone">
                    联系电话：{{ item.tel }}
                </div>
                <div class="btn1">
                    <button @click="edit(item)" class="btn edit"><i class="fas fa-pencil-alt"></i> 编辑</button>
                    <div class="modal" v-if="show">
                        <div class="modal-overlay"></div>
                        <div class="modal-container">
                            <div class="modal-content">
                                <div class="edit2">
                                    <mt-field label="用户名" placeholder="请输入入住人" v-model="username"></mt-field>
                                    <mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="phone"></mt-field>
                                    <mt-field label="身份证" placeholder="请输入身份证" v-model="idCard"></mt-field>
                                    <mt-button @click="confirm(item)" type="primary">确认</mt-button>
                                    <mt-button @click="show = !show" type="danger">关闭</mt-button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <button @click="del(item)" class="btn delete"><i class="fas fa-trash-alt"></i> 删除</button>
                </div>

            </div>
            <div class="add">
                <mt-button @click="isShow = !isShow" class="addPer" type="primary">添加入住人</mt-button>


                <div class="modal" v-if="isShow">
                    <div class="modal-overlay"></div>
                    <div class="modal-container">
                        <div class="modal-content">
                            <div class="edit2">
                                <mt-field label="用户名" placeholder="请输入入住人" v-model="username1"></mt-field>
                                <mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="phone1"></mt-field>
                                <mt-field label="身份证" placeholder="请输入身份证" v-model="idCard1"></mt-field>
                                <mt-button @click="confirm1()" type="primary">确认</mt-button>
                                <mt-button @click="isShow = !isShow" type="danger">关闭</mt-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            data: [],
            show: false,
            username: '',
            phone: '',
            idCard: '',
            id: '',
            isShow: false,
            username1: '',
            phone1: '',
            idCard1: '',
        }
    },
    methods: {
        getList() {
            this.$axios({
                url: this.$api.perList,
                method: 'get',
                Headers: { Authorization: 'Bearer' + this.$store.state.token }
            }).then(res => {
                this.data = res.data
                this.username = res.data.name

                // console.log(this.data);
            })
        },
        edit(item) {
            this.id = item.id
            // console.log(item.id);
            this.show = true

        },

        confirm(item) {
            // console.log(id);
            if (!this.username) {
                this.username = item.name
            }
            if (!this.phone) {
                this.phone = item.tel
            }
            if (!this.idCard) {
                this.idCard = item.cardNo
            }
            this.$axios({
                url: this.$api.person,
                method: 'put',
                Headers: { Authorization: 'Bearer' + this.$store.state.token },
                data: {
                    id: this.id,
                    name: this.username,
                    tel: this.phone,
                    cardNo: this.idCard,
                    cardType: "身份证",
                    userId: item.userId
                }
            }).then(res => {
                location.reload()
            })

        },
        del(item) {
            // console.log(item.id);
            this.$axios({
                url: this.$api.person + '/' + item.id,
                method: 'DELETE',
                Headers: { Authorization: 'Bearer' + this.$store.state.token },
                // data: {
                //     ids: item.id,
                // }
            }).then(res => {
                // console.log(res);
                location.reload()
                // console.log(res);
                // console.log(res);
            })
        },
        confirm1() {
            this.$axios({
                url: this.$api.person,
                method: 'post',
                Headers: { Authorization: 'Bearer' + this.$store.state.token },
                data: {
                    name: this.username1,
                    tel: this.phone1,
                    cardNo: this.idCard1,
                    cardType: "身份证",

                }
            }).then(res => {
                console.log(res);
                // location.reload()
            })
        }

    },
    mounted() {
        this.getList()
    }
}
</script>

<style lang="scss" scoped>
.body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

.people {
    border: 2px solid #ccc;
    border-radius: 5px;
    margin: 10px;
    padding: 10px;
    width: 95%;
}

.id {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.name {
    font-size: 16px;
    margin-bottom: 5px;
}

.phone {
    font-size: 16px;
    margin-bottom: 5px;
}

.btn1 {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.btn {
    font-size: 16px;
    padding: 5px 10px;
    border-radius: 5px;
    margin-left: 10px;
    cursor: pointer;
    color: #fff;
}

.edit {
    background-color: #17a2b8;
}

.delete {
    background-color: #dc3545;
}

.fa-pencil-alt,
.fa-trash-alt {
    margin-right: 5px;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1000;
}

.modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.modal-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    width: 80vw;
    max-width: 400px;
}

.modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
}

.addPer {
    position: absolute;
    /*或者fixed*/
    bottom: 0;
    left: 0;
    right: 0;
    /*可选*/
    margin: auto;
    /*可选*/
}
</style>